<template>
	<div class="wetherContainer">
		<div class="headCity"><p>{{items.city}}一周天气预报</p></div>
		<ul class="mui-table-view" v-for="item in items.data" :key="item.date">
				<li class="mui-table-view-cell mui-media" >
					<a href="#" >
						<p class="mui-media-object mui-pull-left">{{item.day}}</p>
						<div class="mui-media-bodyw" >
							 {{item.wea}}{{item.tem2}}/{{item.tem1}}
							<p class='mui-ellipsis'>{{item.win[0]}}{{item.win_speed}}</p>
						</div>
					</a>
		</li>
		</ul>
		<div>
		</div>
	</div>
</template>

<script>
	
	export default{
		data () {
			return {
				items: []
			}
		},
		created() {
			this.getWeather();
		},
		methods: {
			getWeather() {
					this.$http.get('https://www.tianqiapi.com/api/?version=v1', {
						params: { //参数
							page: this.page,
						},
					}).then(res => { //请求成功后的处理函数     
						this.isLoading = false;
						this.items = res.data;
						console.log(this.items);
					}).catch(err => { //请求失败后的处理函数   
						console.log(err)
					})
				}
			}
		
		
			
	}
</script>

<style>
	.headCity{
		width: 100%;
		background-color: #F2F2F2;
	}
	.headCity>p{
		display: flex;
		margin-top: 15px;
		justify-content: center;
		font-size: 0.9375rem;
		color: #000000;
	}
	.mui-media-bodyw{
		font-family: 'Helvetica Neue',Helvetica,sans-serif;
    font-size: 17px;
    line-height: 21px;
    color: #000;
		margin-left: 50%;
		font-size: 0.9375rem;
	}
</style>
